<template>
  <div>
    <input type="radio" :name="label" :value="label" @click="onChange" :checked="radio === label">
    <span>{{label}}</span>
  </div>
</template>

<script>
export default{
  props: ['label', 'radio'],
  //定制prop和event
  model: {
    prop: 'radio', //父组件监听到click事件以后就会把label的值赋给radio了
    event: 'click' // 父组件的v-model现在默认监听的就是click事件了
  },
  methods: {
    onChange(){
      this.$emit('click', this.label) // 这个就根这个一样this.$emit('input', e.target.value);因为定制了event为click了
      this.$emit('change', this.label) // 为了像element那样， 我们再派发一个change，方便我们监听回调事件,这就是为什么组件绑定一个change事件就能监听到数据的变化
    }
  }
}
</script>
